<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>显示文本内容格式</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/Dropify/0.2.2/css/dropify.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/Dropify/0.2.2/js/dropify.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<script>
window.onload = function () {
	var input = document.getElementById("dropifyfile");
	input.onchange = function () {
		var file = this.files[0];
		if (!!file) {
			//读取本地文件，以UTF-8编码方式输出
			var reader = new FileReader();
			reader.readAsText(file,"utf-8");
			reader.onload = function () {
				var string=JSON.stringify(this.result);
				console.log(string);
				$("#mycode").text(string);
			}
		}
	}
}
</script>

<div class="container-fluid">
<br>
拖放文本文件到下方区域，显示含有转义符文本内容<br>
用途：<br>
显示文本中的格式符如\n,\t，一般编辑器不可见<br>	
将格式化的JSON字符串保存到plist，JSON等文件中，然后取出能够还原能保持原有代码格式	<br>
</div>
<!--dropify插件  -->
<div class="container-fluid"><!-- 水平居中，两边有margin，最小屏幕时，充满父元素 -->
<input type="file" class="dropify" id="dropifyfile" data-max-file-size="10M"/>
</div>
<div class="container-fluid">
	 <br>
	 <pre><code id="mycode"></code></pre> 
</div>
<script>
	$(document).ready(function(){
		// Translated
		$('.dropify').dropify({
			messages: {
				default: '点击或拖拽文件到这里',
				replace: '点击或拖拽文件到这里来替换文件',
				remove:  '移除文件',
				error:   '对不起，你上传的文件太大了'
			}
		});
		// Used events
		var drEvent = $('#input-file-events').dropify();

		drEvent.on('dropify.beforeClear', function(event, element){
			return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
		});

		drEvent.on('dropify.afterClear', function(event, element){
			alert('File deleted');
		});

		drEvent.on('dropify.errors', function(event, element){
			console.log('Has Errors');
		});

		var drDestroy = $('#input-file-to-destroy').dropify();
		drDestroy = drDestroy.data('dropify')
		$('#toggleDropify').on('click', function(e){
			e.preventDefault();
			if (drDestroy.isDropified()) {
				drDestroy.destroy();
			} else {
				drDestroy.init();
			}
		})
	});
</script>   
</body>
</html>